<template>
  <el-row class="commonline">
    <el-col :span="12" class="leftbtn">
      <span style="color:#fff;">.</span>
      <el-button type="primary" style="margin-right: 15px"  size="small" @click="addList" v-if="isshowAdd">新增{{ newText }}</el-button>
      <span class="uploadFile" v-if="isshowImport">
        <el-button type="primary" size="small" @click="importFile" v-if="isshowImport">导入{{ importname }}</el-button>
      </span>
      
      <slot></slot>
    </el-col>
    <el-col :span="12" v-if="showRight">
      <div class="rightbtn">
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
        <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
      </div>
    </el-col>
    <uploadFile
      :isshowDialog="isshowUpload"
      :importNum="impnum"
      :dialogTitle="errorTitle"
      @closedialog="closeupload"
    >
      <div class="errorconten">
        <ul class="errortext">
          <li v-for="(item, index) in errtext" :key="index">
            <div class="itemlist">
              <span class="su" v-if="item.code == 1">{{ item.codeText }}</span>
              <span class="er" v-if="item.code == 2">{{ item.codeText }}</span>
              <div class="remindtext">
                <span>{{ item.msg }}</span>
                <span class="tips" v-if="item.remark">{{ item.remark }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </uploadFile>
    <fileDialog
      @uploadsuccess="uploadsuccess"
      @filerror="filerror"
      :isshowDialog="ishowFile"
      :dialogTitle="'文件导入'"
      :importUrl="importUrl"
      :dowUrl="dUrl"
      @closedialog="closedialog"
    ></fileDialog>
  </el-row>
</template>

<script>
import fileDialog from './component/filedialog'
import uploadFile from './component/uploadFile'
//按钮权限验证
import checkPermission from "@/utils/permission"
export default {
  data() {
    return {
      //是否显示上传文件弹窗
      ishowFile: false,
      //是否显示上传提示
      isshowUpload: false,
      //上传的错误提示
      errtext: [],
      errorTitle: '',
      //录入了几条数据
      impnum: 0,
    }
  },
  components: {
    fileDialog,
    uploadFile,
  },
  props: {
    //是否显示新增按钮
    isshowAdd: {
      type: Boolean,
      default: true,
    },
    //是否显示右侧
    showRight: {
      type: Boolean,
      default: true,
    },
    //导入接口
    importUrl: {
      type: String,
      default: '',
    },
    //新增什么样的表单
    newText: {
      type: String,
      default: '',
      required: false,
    },
    //是否显示导入按钮
    isshowImport: {
      type: Boolean,
      default: false,
    },
    //导入的url
    importUrl: {
      type: String,
      default: '',
    },
    // 导入班型名字
    importname: {
      type: String,
      default: '教练',
    },
    // 下载链接
    dUrl: {
      type: String,
      default: '',
    },
  },
  methods: {
    checkPermission,
    
    filerror() {
      this.$message.error('文件格式错误请重新上传!')
    },
    closeupload() {
      this.$emit('refreshData')
      this.isshowUpload = false
    },
    uploadsuccess(res) {
      if (res.code == '0000') {
        this.$message.success('文件上传成功!')
        this.ishowFile = false
        this.isshowUpload = true
        this.errtext = res.data.result
        this.impnum = res.data.insertLine
        // this.errorTitle = '成功录入'+res.data.insertLine+'条数据！'
      }
    },
    //上传时都会本触发
    filechange(file, fileList) {
      // console.log(9)
      let FileExt = file.name.replace(/.+\./, '').toLowerCase()
      let flag = ['doc', 'docx', 'xls', 'xlsx'].includes(FileExt)
      // if(!flag){
      //     this.$message.error('文件格式错误请重新上传!')
      //     return
      // }
      // //上传操作、、、
      // console.log('上传文件')
    },
    //导入教练
    importFile() {
      //显示上传弹窗
      this.ishowFile = true
    },
    //关闭文件上传弹窗
    closedialog() {
      this.ishowFile = false
    },
    //新增
    addList() {
      this.$emit('addList')
    },
    //查询
    searchlist() {
      this.$emit('searchlist')
    },
    //重置
    resetform() {
      this.$emit('resetform')
    },
  },
  mounted(){
    // console.log(this.isshowAdd)
  }
}
</script>

<style scoped lang='scss'>
.commonline {
  margin-top: 25px;
}
.rightbtn {
  display: flex;
  justify-content: flex-end;
}
.leftbtn {
  // display: flex;
  align-items: center;
}
.errortext {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
}
.errorconten {
  height: 50vh;
  overflow: auto;
}
.itemlist {
  display: flex;
  align-items: center;
  .su {
    color: rgb(103, 194, 58);
  }
  .er {
    color: rgb(245, 108, 108);
  }
  .remindtext {
    margin-left: 4px;
    .tips {
      margin-left: 5px;
      color: #42b3ff;
    }
  }
}
</style>
